<template>
    <div class="page">
        <ChfForm v-bind="formConfig" @submit="submit" v-model="formConfig.formData">
            <template #dynamicAdd="{form}">
                <el-form-item label="标签">
                    <el-form-item v-for="(item, i) in form.list" :label="'标签'+ (i+1)" :key="item.key" :prop="'list.' + i + '.value'"
                        :rules="{required: true, message: '域名不能为空', trigger: 'blur'}">
                        <div style="display:flex">
                            <el-input v-model="item.value" style="margin-right:10px"></el-input>
                            <el-button @click="form.list.push({value:''})" v-if="i===0">添加</el-button>
                            <el-button @click="form.list.splice(i,1)" v-else>删除</el-button>
                        </div>
                    </el-form-item>
                </el-form-item>
            </template>
        </ChfForm>
    </div>
</template>

<script>
export default {
    data () {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("年龄不能为空"));
            }
            if (!Number.isInteger(value)) {
                callback(new Error("请输入数字值"));
            } else {
                if (value < 18) {
                    callback(new Error("必须年满18岁"));
                } else {
                    callback();
                }
            }
        };
        return {
            formConfig: {
                options: {
                    // inline: true,
                    labelWidth: "80px",
                    style: { width: "928px" },
                    // disabled: true,
                    gutter: 40
                },
                items: [
                    {
                        formItem: { label: "年龄", required: true, validator: checkAge },
                        itemRender: { el: "el-input", placeholder: "年龄", value: "age", number: true },
                    },
                    {
                        formItem: { label: "活动区域", required: true },
                        itemRender: {
                            el: "el-select", placeholder: "活动区域", value: "region", options: [],
                            async query () {
                                setTimeout(() => {
                                    this.options = [
                                        { label: "区域一", value: "shanghai" },
                                        { label: "区域二", value: "beijing" },
                                    ];
                                }, 1000);
                            },
                        },
                    },
                    {
                        formItem: {
                            label: "活动时间", required: true,
                            children: [
                                { itemRender: { el: "el-date-picker", placeholder: "日期", value: "date1", type: "date", valueFormat: "yyyy-MM-dd" } },
                                { itemRender: { el: "el-time-picker", placeholder: "时间", value: "date2", valueFormat: "HH:mm:ss" } },
                            ],
                        },
                    },
                    {
                        formItem: { label: "活动时间", required: true },
                        itemRender: {
                            el: "el-date-picker", type: "datetimerange", value: "time", rangeSeparator: "至", startPlaceholder: "开始日期", endPlaceholder: "结束日期", valueFormat: "yyyy-MM-dd HH:mm:ss"
                        },
                    },
                    {
                        formItem: { label: "即时配送" },
                        itemRender: {
                            activeValue: 100, inactiveValue: 0, el: "el-switch", value: "delivery", defVal: 100,
                        },
                    },
                    {
                        formItem: { label: "活动性质", required: true },
                        itemRender: {
                            el: "el-checkbox-group", options: [], value: "type",
                            query (item) {
                                item.options = [
                                    {
                                        label: "美食/餐厅线上活动",
                                        name: "type",
                                    },
                                    { label: "地推活动", name: "type" },
                                    { label: "线下主题活动", name: "type" },
                                    { label: "单纯品牌曝光", name: "type" },
                                ];
                            },
                        },
                    },
                    {
                        formItem: { label: "特殊资源", required: true },
                        itemRender: {
                            el: "el-radio-group", options: [], value: "resource",
                            query (item) {
                                item.options = [
                                    { label: "美食/餐厅线上活动" },
                                    { label: "地推活动" },
                                ];
                            },
                        },
                    },
                    {
                        formItem: { label: "活动形式", required: true },
                        itemRender: { el: "el-input", value: "desc" },
                    },
                    {
                        slotName: "dynamicAdd",
                        value: {
                            list: [{ value: "" }],
                        },
                    },
                    {
                        formItem: { label: "活动形式", required: true },
                        itemRender: { el: "ChfTinymce", value: "tinymceVal" },
                    },
                    {
                        formItem: { label: "附件", required: true },
                        itemRender: {
                            el: "ChfUpload", value: "fileList",
                            uploadConfig: { limit: 3, nameVal: "fileName", urlVal: "filePath", accept: ".jpg,.png", size: 1 },
                        },
                    },
                    {
                        type: 'button',
                        formItem: {
                            children: [
                                {
                                    content: "确定", submit: true, type: 'primary', click (form) {
                                        console.log(form)
                                    }
                                },
                                { content: "重置", reset: true }
                            ],
                        },
                    },
                ],
                formData: {
                    age: 100,
                    fileList: [
                        {
                            fileName:
                                "是否撒旦法客户水电费时代峰峻流诞节弗兰克尽量少开的房间.jpeg",
                            filePath:
                                "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
                        },
                    ],
                },
                formDataChange (a, b) {
                    console.log(this.formData)
                },
            },
        };
    },

    methods: {
        submit (form) {
            console.log(form);
        },
    },
};
</script>

<style lang="scss" scoped>
.page {
}
</style>